<template>
  <div>
   <div  id="main" style="width: 500px;height: 400px;"></div>
  </div>
</template>

<script>
import { getUserListAPI, getOrderListAPI, disListAPI } from '@/api'
export default {
  data() {
    return{
       option : {
        title: {
          text: '畅游山水旅游网站系统数据',
        },
        tooltip: {},
        legend: {
          data: ['数量']
        },
        xAxis: {
          data: ['用户','订单量','评论数']
        },
        yAxis: {},
        query:{
          page:1,
          size:6,
        },
        series: [{
          name: '数量',
          type: 'bar',
          data: [

          ]
        }]
      },
      role:"",
      user:"",
      order:"",
      pinglun:"",
    }
  },
  mounted() {   
    // this.myEcharts();
    this.getUserList();
  },
  methods: {
    myEcharts(){
      var myChart = this.$echarts.init(document.getElementById('main'));
      //配置图表
      var option = this.option;
      myChart.setOption(option);
    },
    async getUserList(){
      const userRes = await getUserListAPI({ page:1, pagesize:10 })
      // console.log('用户列表：', userRes);
      this.user = userRes.data.data.total

      let query = {page:1,pagesize:10}
      const orderRes = await getOrderListAPI(query)
      // console.log('订单列表', orderRes);
      this.order = orderRes.data.data.total

      const disRes = await disListAPI(query)
      // console.log('评论返回', disRes);
      this.pinglun = disRes.data.data.total

      this.option.series[0].data.push(this.user, this.order,this.pinglun)
      // console.log('series', this.option.series[0].data)
      this.myEcharts();
    },
  }
}
</script>



